<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    title="人数设置"
    :destroy-on-close="true"
    draggable
    :align-center="true"
    style="max-width: 600px; height: 500px"
    @close="closeDialog"
  >
    <el-form
      ref="formRef"
      :model="formData"
      label-width="90"
      style="width: 100%"
      :rules="rules"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="工序号" prop="processId" label-width="100px">
            <el-input
              style="width: 100%"
              v-model="processCodeStr"
              disabled
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="mb-[10px]">
        <el-button type="success" @click="addRow"
          ><i-ep-plus />新增行</el-button
        >
      </div>

      <el-table
        ref="dataTableRef"
        :data="formData.listWorker"
        highlight-current-row
        border
        :cell-style="{ 'text-align': 'center' }"
        style="height: 230px"
      >
        <el-table-column
          label="加工人数"
          align="center"
          prop="workerQuantity"
          min-width="100"
        >
          <template #default="scope">
            <el-form-item
              label-width="1"
              :prop="'listWorker.' + scope.$index + '.workerQuantity'"
              :rules="rules.workerQuantity"
            >
              <el-input-number
                v-model="scope.row.workerQuantity"
                style="width: 100%"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="生产节拍"
          align="center"
          prop="tactTime"
          min-width="100"
        >
          <template #default="scope">
            <el-form-item
              label-width="1"
              :prop="'listWorker.' + scope.$index + '.tactTime'"
              :rules="rules.tactTime"
            >
              <el-input-number
                v-model="scope.row.tactTime"
                :controls="false"
                style="width: 100%"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="小时产能"
          align="center"
          prop="hourlyCapacity"
          min-width="100"
        >
          <template #default="scope">
            <el-form-item
              label-width="1"
              :prop="'listWorker.' + scope.$index + '.hourlyCapacity'"
              :rules="rules.hourlyCapacity"
            >
              <el-input-number
                v-model="scope.row.hourlyCapacity"
                style="width: 100%"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop="action"
          min-width="50"
        >
          <template #default="scope">
            <el-form-item label-width="1" class="equip-form-item">
              <el-button
                type="primary"
                size="small"
                link
                @click="removeRow(scope.row)"
              >
                删除
              </el-button>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import useEvent from "@/utils/useEvent";
import { productionVersionHook } from "@/views/mes/mesdayplan/hook/productionVersionHook";
import request from "@/utils/request";

const { eventBusEmit, eventBusOn } = useEvent();
const { event, api, validateInt, validateDecimal } = productionVersionHook();
defineOptions({
  name: "DAYPLANPRODUCTIONVERSIONWORKERDIALOG",
  inheritAttrs: false,
});
const visibleDialog = ref(false);

const formRef = ref(null);

const rowData = ref(null);

const processCodeStr = ref("");

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);
watch(
  () => props.data,
  (row: any) => {
    rowData.value = row;
    const { processCode, processName } = row;
    processCodeStr.value = processCode + "-" + processName;
    formData.listWorker = row.listWorker
      ? JSON.parse(JSON.stringify(row.listWorker))
      : [];
  }
);
/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}
const addRow = () => {
  formData.listWorker.push({
    processId: rowData.value.processId,
    processCode: rowData.value.processCode,
    workerQuantity: 0,
    tactTime: 0,
    hourlyCapacity: 0,
  });
};

const removeRow = (row) => {
  const indexOf = formData.listWorker.indexOf(row);
  formData.listWorker.splice(indexOf, 1);
  formRef.value.validate();
};

onMounted(() => {
  // eventBusOn(event.worker, (row) => {
  //   visibleDialog.value = true;
  //   rowData.value = row;
  //   const { processCode, processName } = row;
  //   processCodeStr.value = processCode + "-" + processName;
  //   formData.listWorker = row.listWorker
  //     ? JSON.parse(JSON.stringify(row.listWorker))
  //     : [];
  // });
});
const formData = reactive({
  listWorker: [],
});

const resetForm = () => {
  formData.listWorker = [];
  rowData.value = null;
  processCodeStr.value = "";
};

const submit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      rowData.value.listWorker = formData.listWorker;
      // eventBusEmit(event.workerSubmit);
      closeDialog();
    }
  });
};

const rules = {
  workerQuantity: [
    {
      required: true,
      message: "请输入加工人数",
      trigger: "blur",
    },
    {
      validator: validateInt,
      trigger: "blur",
    },
  ],
  tactTime: [
    {
      required: true,
      message: "请输入生产节拍",
      trigger: "blur",
    },
    {
      validator: validateDecimal,
    },
  ],
  hourlyCapacity: [
    {
      required: true,
      message: "请输入小时产能",
      trigger: "blur",
    },
    {
      validator: validateDecimal,
    },
  ],
};
// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
